<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>race</title>
</head>

<body>
  <script>
    let p1 = new Promise((res, rej) => {
      setTimeout(() => {
        const num = parseInt(Math.random() * 20)
        if (num <= 10) {
          res(num + 'p1')
        } else {
          rej(num + 'p1')
        }
      }, 1000);
    })

    let p2 = new Promise((res, rej) => {
      setTimeout(() => {
        const num = parseInt(Math.random() * 20)
        if (num <= 10) {
          res(num + 'p2')
        } else {
          rej(num + 'p2')
        }
      }, 200);
    })


    let p3 = new Promise((res, rej) => {
      setTimeout(() => {
        const num = parseInt(Math.random() * 20)
        if (num <= 10) {
          res(num + 'p3')
        } else {
          rej(num + 'p3')
        }
      }, 100);
    })

    // race 比赛
    //   谁先得到结果(不管成功的还是失败的)就把谁的结果作为最终的结果

    const race = Promise.race([p1, p2, p3])
    race.then(
      data => {
        console.log(data)
      }
    ).catch(
      err => {
        console.log(err)
      }
    )

  </script>
</body>

</html>